import React, { memo, useEffect } from "react";
import { sideMenuList } from "./mockup";
import { Menu } from "antd";
import { GifOutlined, GithubFilled } from "@ant-design/icons";
import { SlideMenuContainer } from "./style";
const SlideMenu = memo(() => {
  return (
    <SlideMenuContainer>
      <Menu mode="vertical">
        {sideMenuList.map((m, index) => {
          return (
            <Menu.SubMenu
              key={`side-menu-${index}`}
              title={
                <span>
                  <GifOutlined /> {m.title}
                </span>
              }
            >
              {m.subMenu.map((sm, index) => {
                return (
                  <Menu.SubMenu
                    key={`sub-menu-${index}-${sm.title}`}
                    title={
                      <span>
                        <GifOutlined /> {sm.title}
                      </span>
                    }
                  >
                    {sm.subMenu.map((sms, indx) => {
                      return (
                        <Menu.SubMenu
                          key={`sub-sub-menu-${index}-${sms}`}
                          title={
                            <span>
                              <GithubFilled /> {sms}
                            </span>
                          }
                        ></Menu.SubMenu>
                      );
                    })}
                  </Menu.SubMenu>
                );
              })}
            </Menu.SubMenu>
          );
        })}
      </Menu>
    </SlideMenuContainer>
  );
});

export default SlideMenu;
